<template>
  <div>
    <div class="order-body">
      <el-form size="mini" :inline="true">
        <el-form-item label="保单号">
          <el-input placeholder="请输入保单号" v-model="order_no"></el-input>
        </el-form-item>
        <el-form-item label="被保企业">
          <el-input placeholder="请输入被保企业" v-model="qy_name"></el-input>
        </el-form-item>
        <el-form-item label="出险人">
          <el-input placeholder="请输入出险人" v-model="key_words"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button class="com-btn" icon="el-icon-search" @click="changePage(1)">查询</el-button>
        </el-form-item>
      </el-form>
      <window-title title="报案列表">
        <el-button size="mini" type="danger" icon="el-icon-plus" style="float: right;margin-top: 5px"
          @click="addModels()">报案</el-button>
      </window-title>
      <el-table border size="mini" :data="list.data" style="margin-top: 10px" :header-cell-style="{
        'background-color': '#ebeef5',
        'color': '#333333'
      }">
        <el-table-column label="序号" type="index" width="60px"></el-table-column>
        <el-table-column label="保险方案" prop="bx_name"></el-table-column>
        <el-table-column label="被保人" prop="insure"></el-table-column>
        <el-table-column label="出险地址">
          <template slot-scope="item">
            {{ item.row.cx_province }}{{ item.row.cx_city }}{{ item.row.cx_area }}{{ item.row.cx_address }}
          </template>
        </el-table-column>
        <el-table-column label="事故简述" prop="memo"></el-table-column>
        <el-table-column label="状态">
          <!--          1审核中2待上传3上传待审核4带邮寄5已发件6已完成7审核拒绝8上传拒绝-->
          <template slot-scope="item">
            <span style="color: #F16D61">{{ state_arr[item.row.state] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="理赔金额" prop="price"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="item">
            <div style="display: flex;">
              <el-button size="mini" type="text" @click="addCailiao(item.row.id, item.row.order_id)">查看</el-button>
              <el-button size="mini" type="text" v-if="item.row.state == 1"
                @click="cancelCailiao(item.row.id, item.row.order_id)">取消报案</el-button>
            </div>
          </template>

        </el-table-column>
      </el-table>
      <div class="page-box">

        <el-pagination background small :current-page="list.current_page" :page-size="list.per_page"
          layout="total, prev, pager, next, jumper" :total="list.total" @current-change="changePage"></el-pagination>
      </div>
    </div>
    <el-dialog :visible.sync="add_model" title="添加报案" width="800px" :append-to-body="true">
      <div>
        <el-form size="mini" :inline="true">
          <el-form-item label="保单号">
            <el-input placeholder="请输入保单号" v-model="order_no1"></el-input>
          </el-form-item>
          <el-form-item label="被保企业">
            <el-input placeholder="请输入被保企业" v-model="qy_name1"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button class="com-btn" icon="el-icon-search" @click="changePage1(1)">查询</el-button>
          </el-form-item>
        </el-form>
        <window-title title="保单列表"></window-title>
        <!--        <el-tabs v-model="order_state" @tab-click="changePage1(1)">-->
        <!--          <el-tab-pane label="全部" name="0"></el-tab-pane>-->
        <!--          <el-tab-pane label="有效" name="1"></el-tab-pane>-->
        <!--          <el-tab-pane label="已失效" name="2"></el-tab-pane>-->
        <!--        </el-tabs>-->
        <el-table border size="mini" :data="order_list.data" style="margin-top: 10px" :header-cell-style="{
          'background-color': '#ebeef5',
          'color': '#333333'
        }">
          <el-table-column label="序号" type="index" width="60px"></el-table-column>
          <el-table-column label="保险单号" prop="bd_no"></el-table-column>
          <el-table-column label="保险方案" prop="bx_name"></el-table-column>
          <el-table-column label="被保人" prop="insure"></el-table-column>
          <el-table-column label="保险期限">
            <template slot-scope="item">
              <div>{{ item.row.start_time }}</div>
              <div>{{ item.row.end_time }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120px">
            <template slot-scope="item">
              <el-button size="mini" class="com-btn" @click="trueAn(item.row)">确定报案</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-box">

          <el-pagination background small :current-page="order_list.current_page" :page-size="order_list.per_page"
            layout="total, prev, pager, next, jumper" :total="order_list.total"
            @current-change="changePage1"></el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import windowTitle from '../../components/title/title.vue';

export default {
  components: { windowTitle },
  data() {
    return {
      order_no: '',
      qy_name: '',
      order_no1: '',
      qy_name1: '',
      list: {
        data: [],
        current_page: 1
      },
      add_model: false,
      order_state: '0',
      order_list: {
        data: [],
        current_page: 1
      },
      state_arr: ['', '处理中', '已拒赔', '已赔付', '已取消'],
      key_words: ""
    }
  },
  mounted() {
    this.getData();
    this.getOrder();
  },
  methods: {
    addCailiao(id, bx_id) {
      this.$router.push({
        path: '/index/pei/form/' + bx_id,
        query: {
          id: id
        }
      });
    },
    //取消报案
    cancelCailiao(id, order_id) {
      this.ajaxs('report/cancel', {
        data: {
          id
        },
        success: (res) => {
          console.log(order_id)
          this.toast(res.code, res.msg);
          this.getData();
          // this.add_model = true;
        }
      })
    },
    trueAn(data) {
      this.$router.push({
        path: '/index/pei/form/' + data.id
      });
    },
    addModels() {
      this.add_model = true;
    },
    changePage(e) {
      this.list.current_page = e;
      this.getData();
    },
    changePage1(e) {
      this.order_list.current_page = e;
      this.getOrder();
    },
    getOrder() {
      this.ajaxs('report/order', {
        data: {
          page: this.list.current_page,
          name: this.qy_name1,
          bd_no: this.order_no1

        },
        success: (res) => {
          this.order_list = res.msg;
          // this.add_model = true;
        }
      })
    },
    getData() {
      this.ajaxs('report/index', {
        data: {
          page: this.list.current_page,
          name: this.qy_name,
          bd_no: this.order_no,
          key_words: this.key_words
        },
        success: (res) => {
          this.list = res.msg;
        }
      })
    }
  }
}
</script>

<style scoped>
@import url('../../assets/css/order/list.css');
</style>